.home{
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  }
  //动画
  .modal-fade-enter-active, .modal-fade-leave-active {
    transition:  opacity 5s ease;
  }
   
  .modal-fade-enter, .modal-fade-leave-to /* .fade-leave-active in <2.1.8 */ {
    opacity: 0;
  }
  
  @keyframes growShrink {
    0% {
      transform: scale(1); /* 动画开始时的大小 */
    }
    50% {
      transform: scale(1.8); /* 动画中间时的大小 */
    }
    100% {
      transform: scale(1); /* 动画结束时的大小 */
    }
  }
  
  .loading-content {
    position: fixed;
    left: 50%;
    top: 50%;
  }
  .canvas1 {
    position: relative;
    // top: 0;
    // left: 55px;
    z-index: 1;
  }
  .canvas5 {
    position: relative;
    left: -400px;
    // top: 0;
    // left: 17px;
    z-index: 2;
  }
  .canvas7 {
    position: relative;
    // top: 0;
    left: -800px;
    z-index: 3;
  }
  .canvas2 {
    position: relative;
    // top: 0;
    // left: 484px;
    z-index: 1;
  }
  .canvas6 {
    position: relative;
    // top: 0;
    left: -400px;
    z-index: 2;
  }
  .canvas8 {
    position: relative;
    // top: 0;
    left: -800px;
    z-index: 3;
  }
  ::v-deep .van-overlay {
    z-index: 3000;
  }
  ::v-deep .van-count-down {
    color: gold;
    font-size: 0.34667rem;
  }
  canvas {
    margin-right: 20px;
  }
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }
  .dialog_bg {
    animation: growShrink 2.5s 1;
    width: 389px;
    height: 309px;
    position: relative;
    img {
      width: 100%;
      height: 100%;
    }
    .received_reward {
      position: absolute;
      top:187px;
      left:112px;
      width:157px;
      height:38px;
      display: flex;
      
      img:nth-child(1){
        width: 86px;
        height: 21px;
      }
      img:nth-child(2){
        width: 28px;
        height: 24px;
        margin: 0 6px;
      }
      .diamand_count{
        width: 27px;
        height: 21px;
        line-height: 21px;
        font-size: 27px;
        color: gold;
        
      }
    }
    .action_sheet{
      .first_pic{
        position: absolute;
        bottom: 40px;
        left: 112px;
        width: 157px;
        height: 48px;
      }
      .second_pic{
        position: absolute;
        bottom: -16px;
        left: 112px;
        width: 157px;
        height: 48px;
  
      }
    }
  }
  .init_content {
    background-image: url(../../img/actionBg.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: right;
    box-sizing: border-box;
    width: 757px;
    height: 450px;
    position: relative;
    font-size: 18px;
    padding: 0 30px;
    .user_action {
      position: absolute;
      bottom: 44px;
      left: 283px;
      img {
        width: 188px;
        height: 59px;
      }
    }
    .user_remain_time {
      position: absolute;
      bottom: 18px;
      left: 323px;
      img {
        width: 110px;
        height: 17px;
      }
    }
    .remain_time_num {
      position: absolute;
      bottom: 15px;
      right: 300px;
      width: 18px;
      height: 29px;
      line-height:29px;
      color: gold;
      font-size: 26px;
    }
    .title {
      width: 100%;
      height: 100px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .rules {
      width: 100%;
      height: 80px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .action {
      width: 100%;
      height: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 15px;
      margin-bottom: 15px;
    }
    .remainNum {
      width: 100%;
      height: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
  
      .num_content {
        width: 320px;
        height: 20px;
        border: 1px solid rgb(109, 107, 107);
        border-radius: 20px;
        text-align: center;
        font-size: 16px;
      }
    }
  }
  .game_container {
    background-image: url(../../img/bg.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: right;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    z-index: 50;
    width: 100%;
    height: 100vh;
    overflow-y: hidden;
    .game_frame {
      width: 916px;
      height: 100vh;
      background-image: url(../../img/game_frame.png);
      background-repeat: no-repeat;
      background-size: cover;
      background-position: right;
      position: relative;
  
      .top {
        width: 100%;
        overflow: hidden;
        height: 90px;
  
        .now {
          position: absolute;
          top: 0;
          left: -11px;
          width:169px;
          height: 105px;
          background-image: url(../../img/flag.png);
          background-repeat: no-repeat;
          background-size: cover;
          background-position: right;
          display: flex;
          justify-content: center;
  
          .first_col {
            margin-top: 18px;
            display: flex;
            justify-content: center;
            align-items: center;
          }
          .first_col > span {
            width: 32px;
            height: 24px;
            line-height: 24px;
            text-align: center;
            font-size: 28px;
            color: gold;
          }
          .first_col > img {
            width: 27px;
            height: 27px;
          }
          .second_col {
            margin-top: 3px;
            display: flex;
            justify-content: center;
            align-items: center;
          }
          .second_col > img:nth-child(1) {
            width: 35px;
            height: 20px;
            
          }
          .second_col > img:nth-child(2) {
            width: 24px;
            height: 20px;
          }
          .second_col > span {
            width: 20px;
            height: 20px;
            margin-top: -1px;
            line-height: 20px;
            text-align: center;
            font-size: 20px;
            color: gold;
          }
        }
        .count {
          position: absolute;
          right: 24px;
          top: 7px;
          width: 221px;
          height: 52px;
          background-image: url(../../img/count.png);
          background-repeat: no-repeat;
          background-size: 100% 100%;
          background-position: right;
          .count_num {
            position: absolute;
            left: 140px;
            top: 16px;
            width: 28px;
            height: 24px;
            font-size: 26px;
            color: gold;
            display: flex;
            align-items: center;
          }
        }
  
        .total {
          position: absolute;
          right: 280px;
          top: 7px;
          width: 221px;
          height: 51px;
          background-image: url(../../img/getDiamand.png);
          background-repeat: no-repeat;
          background-size: 100% 100%;
          background-position: right;
          .total_num {
            position: absolute;
            left: 147px;
            top: 16px;
            width: 43px;
            height: 21px;
            font-size: 26px;
            color: gold;
            line-height: 21px;
          }
        }
  
        .back {
          position: absolute;
          left: 953px;
          top: 19px;
          width: 60px;
          height: 37px;
          background-image: url(../../img/back.png);
          background-repeat: no-repeat;
          background-size: 100% 100%;
          background-position: right;
          z-index:9999;
        }
      }
      .content {
        position: absolute;
        top: 95px;
        left: 0;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
  
        .left_content {
          display: flex;
          width: 380px;
          height:380px;
        }
        .middle {
          width: 18px;
          height: 380px;
          margin: 0 10px;
          background-image: url(../../img/middle.png);
          background-repeat: no-repeat;
          background-size: 100% 100%;
          background-position: right;
        }
        .right_content {
          display: flex;
          width:380px;
          height:380px;
        }
      }
      .bottom {
        .tips {
          position: absolute;
          top: 500px;
          left: 273px;
          img {
            width: 31px;
            height: 31px;
            margin-right: 10px;
          }
        }
        .set {
          position: absolute;
          top:494px;
          left: 529px;
          img {
            width: 39px;
            height: 39px;
            margin-right: 20px;
          }
        }
      }
    }
  }
  